import { BasicDrawer, useDrawerInner } from "@/components/Drawer";
import { BasicDescription, useDescription, DescItem } from "@/components/Description";
import { delPatMedicine } from "@/api/ImmigrationDictionary";
import { useTranslation } from "react-i18next";
import { Collapse, Button, message } from "antd";
import moment from "moment";
import { useEffect, useState } from "react";
import { get_treatment } from "@/api/EmergencyDictionary";
import "./DetailDrawer.less";
const DetailDrawer = (props: { register: Fn }) => {
	const { t } = useTranslation();
	let [patientId, setPatientId] = useState("");
	let [drugInfo, setDrugInfo] = useState([]);
	const { Panel } = Collapse;
	const [registerDrawer] = useDrawerInner(props.register, data => {
		console.log("打开Drawer", data);
		setPatientId(data.patientId);
	});

	const schemaDescription: DescItem[] = [
		{
			label: t("felix_ui.drugCount"),
			field: "drugCount"
		},
		{
			label: t("felix_ui.drugDays"),
			field: "drugDays"
		},
		{
			label: t("felix_ui.dailyQty"),
			field: "dailyQty"
		},
		{
			label: t("felix_ui.dosage"),
			field: "dosage"
		},
		{
			label: t("felix_ui.takingAdv"),
			field: "takingAdv"
		},
		{
			label: t("felix_ui.remark"),
			field: "remark"
		},
		{
			label: t("felix_ui.selfPayRatio"),
			field: "selfPayRatio"
		},
		{
			label: t("felix_ui.phmNo"),
			field: "phmNo"
		},
		{
			label: t("felix_ui.drugName"),
			field: "drugName"
		},
		{
			label: t("felix_ui.unitId"),
			field: "unitId"
		},
		{
			label: t("felix_ui.unitName"),
			field: "unitName"
		},
		{
			label: t("felix_ui.activeIngre"),
			field: "activeIngre"
		},
		{
			label: t("felix_ui.sideEffects"),
			field: "sideEffects"
		},
		{
			label: t("felix_ui.drugSpec"),
			field: "drugSpec"
		},
		{
			label: t("felix_ui.storageCond"),
			field: "storageCond"
		},
		{
			label: t("felix_ui.drugAds"),
			field: "drugAds"
		},
		{
			label: t("felix_ui.expiryDays"),
			field: "expiryDays"
		},
		{
			label: t("felix_ui.timesPerDay"),
			field: "timesPerDay"
		},
		{
			label: t("felix_ui.dosePerTime"),
			field: "dosePerTime"
		},
		{
			label: t("felix_ui.weight"),
			field: "weight"
		},
		{
			label: t("felix_ui.purPrice"),
			field: "purPrice"
		},
		{
			label: t("felix_ui.salePrice"),
			field: "salePrice"
		},
		{
			label: t("felix_ui.minPrice"),
			field: "minPrice"
		},
		{
			label: t("felix_ui.drugTakenMode"),
			field: "drugTakenMode"
		},
		{
			label: t("felix_ui.barCode"),
			field: "barCode",
			span: 2
		},
		{
			label: t("felix_ui.drugCats"),
			field: "drugCats",
			span: 2
		},
		{
			label: t("felix_ui.cateName"),
			field: "cateName",
			span: 2
		}
	];
	const [registerDescription] = useDescription({
		title: "Drug Information",
		schema: schemaDescription,
		column: 2
	});
	const getExtra = (id: any) => (
		<Button
			type="danger"
			onClick={async event => {
				event.stopPropagation();
				delPatMedicine(id).then(() => {
					message.error("delete success!");
					getPatientPage();
				});
			}}
		>
			Xoá
		</Button>
	);
	const getPatientPage = () => {
		try {
			get_treatment({ patientId }).then(res => {
				console.log(res.list);
				setDrugInfo(res.list);
			});
		} catch (error) {
			console.log(error);
		}
	};
	useEffect(() => {
		patientId && getPatientPage();
	}, [patientId]);
	return (
		<BasicDrawer title={t("felix_ui.medication_info")} showFooter={false} size="large" {...props} register={registerDrawer}>
			<Collapse accordion>
				{drugInfo.map((item: any) => {
					return (
						<Panel
							header={`${item.drugName} - ${moment(item.createdTime).format("YYYY-MM-DD HH:mm:ss")}`}
							key={item.pkId}
							extra={getExtra(item.pkId)}
						>
							<BasicDescription register={registerDescription} data={item}></BasicDescription>
						</Panel>
					);
				})}
			</Collapse>
		</BasicDrawer>
	);
};

export default DetailDrawer;
